<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.name"
        placeholder="分类名称"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter="handleFilter"
      />
      <el-button v-waves class="filter-item" type="primary" icon="Search" @click="handleFilter">
        搜索
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="Plus" @click="handleCreate">
        添加分类
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80">
        <template #default="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="分类名称" width="200px" align="center">
        <template #default="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="描述" min-width="200px" align="center">
        <template #default="{row}">
          <span>{{ row.description }}</span>
        </template>
      </el-table-column>
      <el-table-column label="排序" width="100px" align="center">
        <template #default="{row}">
          <span>{{ row.sort }}</span>
        </template>
      </el-table-column>
      <el-table-column label="文章数量" width="100px" align="center">
        <template #default="{row}">
          <span>{{ row.articleCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100px" align="center">
        <template #default="{row}">
          <el-tag :type="row.status === 1 ? 'success' : 'danger'">
            {{ row.status === 1 ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="150px" align="center">
        <template #default="{row}">
          <span>{{ parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template #default="{row,$index}">
          <el-button type="primary" size="small" @click="handleUpdate(row)">
            编辑
          </el-button>
          <el-button v-if="row.status!==0" size="small" type="success" @click="handleModifyStatus(row,'published')">
            启用
          </el-button>
          <el-button v-if="row.status!==1" size="small" @click="handleModifyStatus(row,'draft')">
            禁用
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(row,$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.pageSize" @pagination="getList" />

    <el-dialog :title="textMap[dialogStatus]" v-model="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="80px" style="width: 400px; margin-left:50px;">
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="temp.name" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="temp.description" type="textarea" :rows="3" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="temp.sort" :min="0" :max="999" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">
            取消
          </el-button>
          <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination/index.vue'

const tableKey = ref(0)
const list = ref([])
const total = ref(0)
const listLoading = ref(true)
const listQuery = reactive({
  current: 1,
  pageSize: 20,
  name: undefined
})

const temp = reactive({
  id: undefined,
  name: '',
  description: '',
  sort: 0
})

const dialogFormVisible = ref(false)
const dialogStatus = ref('')
const textMap = {
  update: '编辑分类',
  create: '创建分类'
}

const rules = {
  name: [{ required: true, message: '分类名称是必填项', trigger: 'blur' }],
  description: [{ required: true, message: '描述是必填项', trigger: 'blur' }],
  sort: [{ required: true, message: '排序是必填项', trigger: 'blur' }]
}

onMounted(() => {
  getList()
})

function getList() {
  listLoading.value = true
  // 模拟数据
  setTimeout(() => {
    list.value = [
      {
        id: 1,
        name: '前端开发',
        description: '前端技术相关文章',
        sort: 1,
        articleCount: 25,
        status: 1,
        createTime: new Date()
      },
      {
        id: 2,
        name: '后端开发',
        description: '后端技术相关文章',
        sort: 2,
        articleCount: 18,
        status: 1,
        createTime: new Date()
      },
      {
        id: 3,
        name: '移动开发',
        description: '移动端开发相关文章',
        sort: 3,
        articleCount: 12,
        status: 1,
        createTime: new Date()
      },
      {
        id: 4,
        name: '人工智能',
        description: 'AI和机器学习相关文章',
        sort: 4,
        articleCount: 8,
        status: 1,
        createTime: new Date()
      }
    ]
    total.value = 4
    listLoading.value = false
  }, 1000)
}

function handleFilter() {
  listQuery.current = 1
  getList()
}

function handleModifyStatus(row, status) {
  ElMessage({
    message: '操作成功',
    type: 'success'
  })
  row.status = status === 'published' ? 1 : 0
}

function resetTemp() {
  temp.id = undefined
  temp.name = ''
  temp.description = ''
  temp.sort = 0
}

function handleCreate() {
  resetTemp()
  dialogStatus.value = 'create'
  dialogFormVisible.value = true
}

function handleUpdate(row) {
  temp.id = row.id
  temp.name = row.name
  temp.description = row.description
  temp.sort = row.sort
  dialogStatus.value = 'update'
  dialogFormVisible.value = true
}

function createData() {
  ElMessage({
    message: '创建成功',
    type: 'success'
  })
  dialogFormVisible.value = false
  getList()
}

function updateData() {
  ElMessage({
    message: '更新成功',
    type: 'success'
  })
  dialogFormVisible.value = false
  getList()
}

function handleDelete(row, index) {
  if (row.articleCount > 0) {
    ElMessage({
      message: '该分类下还有文章，无法删除',
      type: 'warning'
    })
    return
  }
  
  ElMessageBox.confirm('此操作将永久删除该分类, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    list.value.splice(index, 1)
    ElMessage({
      type: 'success',
      message: '删除成功!'
    })
  })
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.filter-container {
  padding-bottom: 10px;
  
  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
    margin-right: 10px;
  }
}
</style>